
import * as PIXI from 'pixi.js';
import {addRes} from 'common/const/assetResources';
import LOADING from 'common/const/loading';
import {findGameApp} from 'common/utils';
import FadeOutText from './fadeOutText';
import Progress from './progress';
import BeginGame from './beginGame';
import RuleModal from './ruleModal';
import Rect from 'components/rect';
import Text from 'components/text';
const { Container } = PIXI;

// @injectStore
export default class Loading {
  constructor({parent}) {
    this.parent = parent;
    this.CONST = LOADING;

    this.container = new Container(750, 1334);

    const { width, height } = window.CFG.view;

    this.bg = new Rect({top: 0, left: 0, width, height, fill: 0xff000000});
    this.container.addChild(this.bg);

    // this.fadeOutText = new FadeOutText({parent: this, ...LOADING.fadeOutText});

    this.loader();

    // this.container.addChild(this.fadeOutText.container);
  }

  loader = async () => {

    let resource = await addRes('img');
    this._renderProgress(0);

    PIXI.loader
      .add(resource)
      .on('progress', (loader) => {
        this._renderProgress(loader.progress);
      })
      .load(() => {
        this.container.removeChild(this.progress.container);
        this._renderFadeOutTexts();
        // this._renderBegin();

        this.skipText = new Text({value: '跳 过', top: 50, left: 650, fontSize: 28, fill: 0xffffff});
        this.skipText.interactive = true;

        this.skipText.on('tap', () => {
          this._renderBegin();
        });

        this.container.addChild(this.skipText);
      });
  };

  _renderProgress = (progress) => {

    if (this.progress) {
      this.container.removeChild(this.progress.container);
    }

    this.progress = new Progress({parent: this, progress, ...LOADING.progress});

    this.container.addChild(this.progress.container);
  };

  _renderFadeOutTexts = (nextList) => {

    const { list, lineTimeout, ...other } = this.CONST.fadeOutText;


    if (this.fadeOutText && this.fadeOutText.container) this.container.removeChild(this.fadeOutText.container);

    const addFadeOutText = (texts) => {
      const [first, ...otherList] = texts;
      this.fadeOutText = new FadeOutText({parent: this, list: [first], ...other, onEnd: () => {
        if (otherList.length) {

          setTimeout(() => {
            this._renderFadeOutTexts(otherList);
          }, lineTimeout);

        } else {
          if (!this.beginGame) {
            this._renderBegin();
          }

          this.container.removeChild(this.skipText);
        }

      }});
    };

    const texts = nextList ? nextList : list;
    addFadeOutText(texts);

    this.container.addChild(this.fadeOutText.container);




  };

  _renderBegin() {

    this.beginGame = new BeginGame({parent: this, ...LOADING.beginGame, onRuleClick: this._renderRuleModal});

    const App = findGameApp(this);

    this.beginGame.x = (App.app.screen.width - this.beginGame.container.width) / 2;

    this.container.addChild(this.beginGame.container);
  };

  _renderRuleModal = () => {
    const { ruleModal } = this.CONST;

    this.ruleModal = new RuleModal({parent: this, ...ruleModal, onClose: () => {
      this.container.removeChild(this.ruleModal.container);
    }});

    this.container.addChild(this.ruleModal.container);
  };

}
